<!-- 本页样式 -->
<style scoped>
.del-dialog-cnt {
	font-size: 16px;
	text-align: center;
}
</style>
<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 标题导航栏 -->
		<div class="title-box crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-tickets"></i>&nbsp;&nbsp;功能模块
				</el-breadcrumb-item>
				<el-breadcrumb-item>查询列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 主体区 -->
		<div class="container">
			<!-- 查询条件 -->
			<div class="search-box">
				<div class="search-item-box">
					<table>
						<tr>
							<td>
								<i class="el-icon-search"></i>
							</td>
							<td>
								<!-- <el-input  clxearable v-model="parampters.modname" placeholder="模块名称" class="handle-input mr10"></el-input> -->
								<el-select v-model="parampters.modtype" clearable placeholder="请选择模块类型">
									<el-option
										v-for="item in dicts.modetype"
										:key="item.CODE"
										:label="item.NAME"
										:value="item.CODE"
									></el-option>
								</el-select>
							</td>
						</tr>
					</table>
				</div>
				<div class="search-button-box">
					<el-button type="primary" icon="search" @click="searchLoad">查询</el-button>
					<el-button type icon="add" @click="toAdd">添加</el-button>
				</div>
			</div>
			<!-- 查询条件END -->
			<div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="grid-content">
							<el-row>
								<el-col :span="22">
									<el-tree
										ref="tree"
										:highlight-current="true"
										:current-node-key="1"
										:data="treeData"
										node-key="id"
										:props="treeProps"
										default-expand-all
										:expand-on-click-node="false"
										@node-click="toView"
										:filter-node-method="filterNode"
										style="overflow:auto;"
									>
										<span
											class="custom-tree-node"
											slot-scope="{ node, data }"
											style="justify-content:space-between;flex:1;display:flex;"
										>
											<!-- <span class="custom-tree-node" slot-scope="{ node, data }" style="justify-content:space-between;flex:1;display:flex;"> -->
											<span>{{ node.label }}</span>
											<span style="margin-right:20px">
												<i
													class="el-icon-edit"
													title="编辑"
													@click.stop.prevent="() => toEdit(node, data)"
													style="font-size:10px;padding-right:10px"
												></i>
												<i
													class="el-icon-delete"
													title="删除"
													@click.stop.prevent="() => toDel(node, data)"
													style="font-size:10px;padding-right:10px"
												></i>
												<!-- <i
													class="iconfont icon-cyu"
													title="角色"
													@click.stop.prevent="() => toRoles(node, data)"
													style="font-size:10px;padding-right:10px"
												></i> -->
											</span>
										</span>
									</el-tree>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="16">
						<div class="grid-content" style="margin-left:20px">
							<el-row>
								<el-col :span="24" style="text-align:center">
									<el-form
										:model="formBean"
										:rules="validateRules"
										ref="form1"
										label-width="100px"
										class="ruleForm"
									>
										<el-row>
											<el-col :span="12">
												<el-form-item label="模块名称" prop="modname">
													<el-input clearable :readonly="readOnly" v-model="formBean.modname"></el-input>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="模块描述" prop="moddesc">
													<el-input clearable :readonly="readOnly" v-model="formBean.moddesc"></el-input>
												</el-form-item>
											</el-col>
										</el-row> 
										<el-row>
											<el-col :span="12">
												<el-form-item label="索引代码" prop="modcode">
													<el-input clearable :readonly="readOnly" v-model="formBean.modcode"></el-input>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="序号" prop="numb">
													<el-input clearable :readonly="readOnly" v-model="formBean.numb"></el-input>
												</el-form-item>
											</el-col>
										</el-row> 
										<el-row>
											<el-col :span="12">
												<el-form-item label="模块参数" prop="modparam">
													<el-input clearable :readonly="readOnly" v-model="formBean.modparam"></el-input>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="图标名称" prop="imgname">
													<el-input clearable :readonly="readOnly" v-model="formBean.imgname"></el-input>
												</el-form-item>
											</el-col>
										</el-row>

										<el-row>
											<el-col :span="12">
												<el-form-item label="模块类型" prop="modtype">
													<el-select
														v-model="formBean.modtype"
														clearable
														placeholder="请选择模块类型"
														:disabled="readOnly"
														style="width:100% "
													>
														<el-option
															v-for="item in dicts.modetype"
															:key="item.CODE"
															:label="item.NAME"
															:value="item.CODE"
														></el-option>
													</el-select>
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="启用状态" prop="state">
													<el-select
														v-model="formBean.state"
														clearable
														placeholder="请选择启用状态"
														:disabled="readOnly"
														style="width:100% "
													>
														<el-option label="启用" value="1"></el-option>
														<el-option label="禁用" value="0"></el-option>
													</el-select>
												</el-form-item>
											</el-col>
										</el-row> 
										<el-row>
											<el-col>
												<el-form-item label="图标名称" prop="imgname">
													<el-input clearable :readonly="readOnly" v-model="formBean.imgname"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col>
												<el-form-item label="模块URL" prop="modurl">
													<el-input clearable :readonly="readOnly" v-model="formBean.modurl"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col>
												<el-form-item label="关联URL" prop="modsuburl">
													<el-input clearable :readonly="readOnly" v-model="formBean.modsuburl"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<!-- <el-row style="margin-left:30px">
											<el-col :span="12">
												<el-form-item label="模块功能列表" prop></el-form-item>
											</el-col>
											<el-col :span="12" style="text-align:right">
												<el-button v-if="!readOnly" type="primary" @click="toAddFuns">增加</el-button>
											</el-col>
										</el-row>
										<el-row style="margin-left:30px;margin-bottom:20px;">
											<el-col>
												<el-table
													:data="funsTableData"
													border
													:header-cell-style="{background:'#F3F3F3',color:'#606266'}"
													style="width: 100%"
													ref="multipleTable"
												>
													<el-table-column type="index" label="序号" width="50"></el-table-column>
													<el-table-column prop="funcname" label="功能英文名"></el-table-column>
													<el-table-column prop="funcdesc" label="功能中文名"></el-table-column>
													<el-table-column label="操作" width="160">
														<template slot-scope="scope">
															<el-button
																size="mini"
																type="danger"
																v-if="!readOnly"
																@click="toDelFuns( scope.$index)"
																style="margin-left:5px"
															>删除</el-button>
														</template>
													</el-table-column>
												</el-table>
											</el-col>
										</el-row> -->
									</el-form>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="24" style="text-align:center">
									<el-button v-if="!readOnly" @click="cancelForm('form1')">取 消</el-button>
									<el-button v-if="!readOnly" type="primary" @click="submitForm('form1')">保 存</el-button>
									<el-button v-if="!readOnly" @click="resetForm('form1')">重 置</el-button>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 主体区END -->
	</div>
</template>

<script>
import "@/assets/icon/icon.css";
import viewModelrole from "views/uim/ams/amsmodel_role.vue";
import viewModelFuns from "views/uim/ams/amsmodel_funs.vue";
export default {
	data() {
		return {
			// 筛选条件
			parampters: {
				//查询参数
				modname: "", //模块名称
				modcode: "", //索引代码
				modtype: "", //模块类型
				loginsid: "", //登录会话SID
				pageRows: 8, //每页行数
				pageCount: 0, //总页数
				pageIndex: 0, //当前页
				totalCount: 0 //总记录数
			},
			// 查询出的表格数据
			treeData: [],
			selectNode: {},
			treeProps: {
				label: "modname"
			},
			defaultProps: {
				children: "children",
				label: "label"
			},
			// 新增用户表单信息
			formBean: {
				id: "", //id
				parentid: "", //parentid
				modname: "", //模块名称
				moddesc: "", //模块描述
				modcode: "", //索引代码
				numb: "", //序号
				modurl: "", //模块URL
				modsuburl: "", //关联URL
				modparam: "", //模块参数
				imgname: "", //图标名称
				modtype: "", //模块类型
				state: "" //启用状态
			},
			funsTableData: [],
			// 表单校验规则
			validateRules: {
				id: [{ required: true, message: "请输入id", trigger: "blur" }],
				parentid: [
					{ required: false, message: "请输入parentid", trigger: "blur" }
				],
				modname: [
					{ required: false, message: "请输入模块名称", trigger: "blur" }
				],
				moddesc: [
					{ required: false, message: "请输入模块描述", trigger: "blur" }
				],
				modcode: [
					{ required: false, message: "请输入索引代码", trigger: "blur" }
				],
				numb: [{ required: false, message: "请输入序号", trigger: "blur" }],
				modurl: [
					{ required: false, message: "请输入模块URL", trigger: "blur" }
				],
				modsuburl: [
					{ required: false, message: "请输入关联URL", trigger: "blur" }
				],
				modparam: [
					{ required: false, message: "请输入模块参数", trigger: "blur" }
				],
				imgname: [
					{ required: false, message: "请输入图标名称", trigger: "blur" }
				],
				modtype: [
					{ required: false, message: "请输入模块类型", trigger: "blur" }
				],
				state: [{ required: false, message: "请输入启用状态", trigger: "blur" }]
			},

			//confirm提示信息弹框
			confirmBox: null,
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "list",
			//字典集
			dicts: {},
			tablestyle: {},
			tablebg: "#041785",
			// 表单只读状态
			readOnly: false
		};
	},
	components: {},
	// 进入页面加载数据
	activated() {
		this.initSelectOptoins();
	},
	//离开页面销毁定时器
	deactivated() {
		this.selectNode = {};
	},
	methods: {
		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("modetype", null);
		},
		/**
		 * 通用定义方法：加载下拉选择 字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			this.$dicts
				.loadDict(this.httpRoot.BASEURL_UIM, params, dictKind)
				.then(res => {
					this.$set(this.dicts, dictKind, res);
					this.parampters.modtype = this.dicts[dictKind][0].code;
					this.handleInitLoad();
				});
		},
		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.searchLoad();
		},

		/**
		 * 方法描述
		 * @author your name
		 * @date 2019/03/28
		 * @param {Object} param 参数描述
		 */
		initFormData(param) {
			this.actType = param.actType;
			if (this.actType == "view") {
				// 查看状态 标识表单只读
				this.readOnly = true;
			} else if (this.actType == "add") {
				this.readOnly = false;
			} else {
				this.readOnly = false;
			}
			var url = this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsmodel/";
			if (this.actType != null && this.actType.length > 0) {
				url += "to" + this.actType;
			}
			//查询参数
			var paramQuery = {
				loginsid: this.$util.getLoginer().sessionId,
				id: param.seleid
			};
			if (this.actType == "add") {
				this.formBean = {
					modtype: this.parampters.modtype,
					state: "1",
					parentid: param.seleid
				};
				this.firstLoadedData = JSON.stringify(this.formBean);
			} else {
				this.$axios
					.get(url, {
						params: paramQuery
					})
					.then(res => {
						this.formBean = {};
						if (res.data.result == "true") {
							this.formBean = res.data.resultData;
							this.firstLoadedData = JSON.stringify(this.formBean);
							this.funsTableData = [];
							this.funsTableData = this.formBean.functions;
						} else {
							this.$error(
								"初始数据加载失败:" +
									res.data.resultMessage +
									",错误代码:" +
									res.data.resultCode
							);
						}
						window.onclick();
					})
					.catch(function(error) {});
			}
		},
		/**
		 * 条件筛选查询,加载数据
		 */
		searchLoad() {
			this.parampters = this.$util.trimObjStr(this.parampters);
			this.parampters.loginsid = this.$util.getLoginer().sessionId;
			this.$axios
				.get(this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsmodel/tolist", {
					params: this.parampters
				})
				.then(res => {
					if (res.data.result == "true") {
						let data = res.data.resultData; //
						if (data.children && data.children.length) {
							this.treeData = data.children; 
							this.toView(this.treeData[0], null);
							// setTimeout(() => {
							// 	let doms = document.getElementsByClassName("el-tree-node");
							// 	doms[0].classList.add("is-current");
							// 	doms[0].classList.add("el-tree--highlight-current");
							// }, 200);
						} else {
							this.treeData = [];
						}
					} else {
						this.$error(
							"查询失败" +
								res.data.resultMessage +
								",错误代码:" +
								res.data.resultCode
						);
					}
				})
				.catch(function(error) {});
		},

		/**
		 * 新增记录信息
		 */
		toAdd(data) {
			var pageParam = {
				actType: "add",
				seleid: this.selectNode.id ? this.selectNode.id : "0"
			};
			this.initFormData(pageParam);
		},

		/**
		 * 修改记录信息
		 * @augments index 编辑数据所在的行索引
		 * @augments row 编辑数据行的数据
		 */
		toUpd(row) {
			this.selectedId = row.id;
			//页面参数
			var pageParam = {
				actType: "upd",
				seleid: this.selectedId
			};
			this.$router.push({
				path: "/amsmodelDetail",
				query: pageParam
			});
		},
		/**
		 * 删除记录信息
		 * @augments index 所在表格行的索引
		 * @augments row 所在表格行的所有数据对象
		 */
		toDel(node, data) {
			this.selectNode = node;
			this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
			this.confirmBox.exec.then(btnName => {
				if (btnName == "ok") {
					// 确定删除数据操作
					this.$axios
						.post(this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsmodel/delsave", {
							loginsid: this.$util.getLoginer().sessionId,
							id: data.id
						})
						.then(res => {
							if (res.data.result == "true") {
								this.$dialog.close(this.confirmBox.vm);
								this.$message.success("删除成功");
								this.searchLoad();
							} else {
								this.$dialog.close(this.confirmBox.vm);
								this.$error(
									"删除失败：" +
										res.data.resultMessage +
										",错误代码:" +
										res.data.resultCode
								);
							}
						});
				} else {
					this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
				}
			});
		},
		/**
		 * 查看记录信息
		 * @augments row 编辑数据行的数据
		 * @augments ev
		 */
		toView(node, data) {
			//页面参数
			if (node.id == this.selectNode.id) {
				// this.selectNode = {};
				// this.formBean = {};
			} else {
				this.selectNode = node;
				var pageParam = {
					actType: "view",
					seleid: node.id
				};
				this.initFormData(pageParam);
			}
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.areaname.indexOf(value) !== -1;
		},
		toogleBorder(e) {
			// let doms = document.getElementsByClassName("el-tree-node__content");
			// for (var i = 0; i < doms.length; i++) {
			//   doms[i].classList.remove("el-tree--highlight-current");
			//   doms[i].classList.remove("is-current");
			// }
			let a = e.target;
			while (a) {
				if (a.classList.contains("el-tree-node__content")) {
					a.classList.add("is-current");
					a.classList.add("el-tree--highlight-current");
					break;
				} else {
					if (a.parentNode) {
						a = a.parentNode;
					}
				}
			}
		},
		/**
		 * 点击编辑按钮
		 */
		toEdit(node, data) {
			console.log(node, data, this.selectNode);
			if (data.id != this.selectNode.id) return;
			this.readOnly = false;
			this.actType = "upd";
		},
		/**
		 * 弹出分配角色dialog
		 * @param {Object} data 当前节点的数据对象
		 * @param {Object} node 当前节点对象
		 */
		toRoles(data, node) {
			//如果不是当前选中的节点去配置角色的话那么点击无效
			if (node.id != this.selectNode.id) return;
			var dialogParams = {
				loginsid: this.parampters.loginsid,
				modeid: node.id
			};
			console.log(node.modname);
			let commDialog = this.$dialog.commDialog(
				"设置用户[" + node.modname + "]角色",
				viewModelrole,
				dialogParams,
				"800px",
				"500px"
			);
			commDialog.exec.then(data => {});
		},
		/**
		 * 提交表单
		 * @augments formName 表单名称
		 */
		submitForm(formName) {
			//
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 表单校验成功
					if (this.actType == "add" || this.actType == "upd") {
						var url = this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsmodel/";
						url +=
							this.actType +
							"save" +
							"?loginsid=" +
							this.$util.getLoginer().sessionId;
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						this.formBean.functions = [];
						this.formBean.functions = this.funsTableData;
						console.log(this.formBean );
						this.$axios
							.post(url, this.formBean)
							.then(res => {
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (res.data.result == "true") {
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									this.searchLoad();
									// this.$router.push({
									//   path: "/amsmodelList"
									// });
								} else {
									this.$error(
										"数据保存失败:" +
											res.data.resultMessage +
											",错误代码:" +
											res.data.resultCode
									);
								}
							})
							.catch(function(error) {
								this.fullscreenLoading = false;
							});
					}
				} else {
					// 表单校验失败
					// this.$error("数据校验失败.");
				}
			});
		},
		/**
		 * 重置表单
		 * @augments formName 表单名称
		 */
		resetForm(formName) {
			this.formBean = JSON.parse(this.firstLoadedData);
		},
		/**
		 * 取消编辑
		 * @augments formName 表单名称
		 */
		cancelForm(formName) {
			this.resetForm(formName);
			this.readOnly = true;
		},
		/**
		 * 增加功能模块
		 */
		toAddFuns() {
			//页面参数
			var pageParam = {
				actType: "add",
				seleid: "-1"
			};
			let commDialog = this.$dialog.commDialog(
				"添加功能模块",
				viewModelFuns,
				pageParam,
				"400px",
				"260px"
			);
			commDialog.exec.then(data => {
				if (data.type == "ok") {
					this.funsTableData.push(data.data);
				}
			});
		},
		/**
		 *删除功能模块
		 */
		toDelFuns(index) {
			this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
			this.confirmBox.exec.then(btnName => {
				if (btnName == "ok") {
					this.$dialog.close(this.confirmBox.vm);
					this.funsTableData.splice(index, 1);
				} else {
					this.$dialog.close(this.confirmBox.vm);
				}
			});
		}
	}
};
</script>

